<template>
  <div style="margin: 10px;">
    <form id="project_config_form">
      <div class="form-group">
        <label for="project_name">{{project_name.description}}</label>
        <input class="form-control" id="project_name" placeholder="请输入项目名称" type="text"/>
      </div>
      <div class="form-group" id="project_desc_div">
        <label for="project_desc">{{project_desc.description}}</label>
        <input class="form-control" id="project_desc" placeholder="请输入项目描述" type="text"/>
      </div>
      <div class="form-group">
        <label for="project_type">{{project_type.description}}</label>
        <select class="form-control" id="project_type">
          <option @value='item.index' v-for='item in project_type.data'>{{item.type}}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="code_language">{{code_language.description}}</label>
        <select class="form-control" id="code_language">
          <option @value='item.index' v-for='item in code_language.data'>{{item.type}}</option>
        </select>
        </select>
      </div>
      <div class="form-group">
        <label for="build_type">{{build_type.description}}</label>
        <select class="form-control" id="builtype">
          <option @value='item.index' v-for='item in build_type.data'>{{item.type}}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="deploy_type">{{deploy_type.description}}</label>
        <select class="form-control" id="deploy_type">
          <option @value='item.index' v-for='item in deploy_type.data'>{{item.type}}</option>
        </select>
      </div>
      <div class="form-group form-check">
        <input class="form-check-input" id="enable_flag" type="checkbox">
        <label class="form-check-label" for="enable_flag">是否生效</label>
      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'ProjectAddConfig',
    data: function () {
      return {
        'project_name': {
          'description': '项目名称'
        },
        'project_desc': {
          'description': '项目描述'
        },
        'project_type': {
          'description': '项目类型',
          'data': [
            {'index': 0, 'type': '前端'},
            {'index': 1, 'type': '后端'},
            {'index': 2, 'type': '运维'}
          ]
        },
        'code_language': {
          'description': '开发语言',
          'data': [
            {'index': 0, 'type': 'Common'},
            {'index': 1, 'type': 'Vue'},
            {'index': 2, 'type': 'AngularJS'},
            {'index': 3, 'type': 'Avalon'},
            {'index': 4, 'type': 'Reactor'},
            {'index': 5, 'type': 'Java'},
            {'index': 6, 'type': 'C/C++'},
            {'index': 7, 'type': 'Python'},
            {'index': 8, 'type': 'Go'},
            {'index': 9, 'type': 'Scala'}
          ]
        },
        'build_type': {
          'description': '构建类型',
          'data': [
            {'index': '0', 'type': 'webpack'},
            {'index': 1, 'type': 'grunt'},
            {'index': 2, 'type': 'gulp'},
            {'index': 3, 'type': 'fis3'},
            {'index': 4, 'type': 'rollup'},
            {'index': 5, 'type': 'maven'},
            {'index': 6, 'type': 'gradle'},
            {'index': 7, 'type': 'make'},
            {'index': 8, 'type': 'cmake'}
          ]
        },
        'deploy_type': {
          'description': '部署类型',
          'data': [
            {'index': 0, 'type': 'Docker Swarm'},
            {'index': 1, 'type': 'Kubernetes'},
            {'index': 2, 'type': 'Physical machine'}
          ]
        }
      }
    }
  }
</script>
